<template>
	<view>

	<!-- 自定义导航栏 -->
			<u-navbar style="font-weight: bold;margin-bottom: 88rpx;" leftText="返回" title="我的维修" :safeAreaInsetTop="false" bgColor="#3183FC" leftIconColor="#FFFFFF"
				:titleStyle="{ color: '#FFFFFF' }">
				<view class="u-nav-slot" slot="left">
					<div >
						<div @click="tzwdsy">
							<image style="width: 40rpx;" src="/static/wdimg/ztb-fh.png" mode="widthFix"></image>
						</div>
					</div>
				</view>
			</u-navbar>


	
	
	
	<div class="top">
		<div class="xxxg">	
		
			<div class="wdyhq-dh">
				<div 
					class="wdyhq-dh1" @click="tzwdwx">进行中</div>
				<div style="border-bottom: 2px solid white;" 
				class="wdyhq-dh2" @click="tzwdywcdd">已完成</div>
			</div>
			
			<!-- 卡片开始 待支付-->
				<uni-card class="xxxg-card xxxg-tshz"  padding="10px 0" :thumbnail="avatar" >
			<div class="wdwxdd-head">
				
				<div class="wdwxdd-head-left">
					<div style="font-weight: bold;">
						维修方式：
					</div>
					<div>
						<uni-data-select
						style=" width: 250rpx;  border-radius: 25rpx;"
						v-model="value"
						:localdata="range"
						></uni-data-select>
					</div>
				</div>
				
			<div class="wdwxdd-head-right">
					<div class="wdwx-button" type="primary" @click="inputDialogToggle">
						<div style="margin-top: 10rpx;">
							<image src="/static/wdimg/rl@2x.png" style="width: 50rpx;" mode="widthFix"></image>				
						</div>
						<div style="margin-left: 20rpx;">
							预约日期
						</div>
					</div>		
				</div>
	
			
			</div>
			
			
			<view>
				<!-- 输入框示例 -->
				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose"  title="输入内容" value="对话框预置提示内容!"
						>
						<div style="width: 100%;">
							<DateSelector
							  :mode="selectDateType"
							  @onChange="onDateSelectorChange"
							  @onSubmit="onDateSelectorSubmit"
							  minDate="2020-2-3"
							  maxDate="2025-10-11"
							  defaultStartDate="2021-1-10"
							  defaultEndDate="2022-10-30"
							/>
						</div>
						</uni-popup-dialog>
				</uni-popup>
			</view>
			
			</uni-card>
			<!-- 卡片结束 -->
			
	
	<!-- 卡片开始 待支付-->
		<uni-card class="xxxg-card"  padding="10px 0" :thumbnail="avatar" >

		<div class="wxmknr">
			<div class="wxmknr-left">维修单号:</div>
			<div class="wxmknr-right">3535252</div>
		</div>
		
		<div class="wxmknr">
			<div class="wxmknr-left">维修方式:</div>
			<div class="wxmknr-right">到店维修</div>
		</div>
		
		<div class="wxmknr">
			<div class="wxmknr-left">预约日期:</div>
			<div class="wxmknr-right">
				<span style="margin-right: 20rpx;">2022/11/10</span>
				<span>11:00</span>
			</div>
		</div>
		

	</uni-card>
	<!-- 卡片结束 -->
	
	
	
	<!-- 卡片开始 待支付-->
		<uni-card class="xxxg-card"  padding="10px 0" :thumbnail="avatar" >
	
		<div class="wxmknr">
			<div class="wxmknr-left">维修单号:</div>
			<div class="wxmknr-right">3535253</div>
		</div>
		
		<div class="wxmknr">
			<div class="wxmknr-left">维修方式:</div>
			<div class="wxmknr-right">上门取车</div>
		</div>
		
		<div class="wxmknr">
			<div class="wxmknr-left">预约日期:</div>
			<div class="wxmknr-right">
				<span style="margin-right: 20rpx;">2022/11/10</span>
				<span>11:00</span>
			</div>
		</div>
		
	
	</uni-card>
	<!-- 卡片结束 -->
			
		</div>
	</div>
	
	
	
	</view>
</template>

<script>
	import DateSelector from '@/components/dengrq-datetime-picker/dateSelector/index.vue';

	export default {
		components: {
			  DateSelector
		},
		data() {
			return {
				value: 1,
				 range: [
				        { value: 0, text: "全部" },
				        { value: 1, text: "到店维修" },
				        { value: 2, text: "上门取车" },
				      ],
			}
		},
		methods: {
			tzwdsy(){
				uni.switchTab({
					url: "/pages/my/my"
				})
			},	
			tzwdwx(){
				uni.navigateTo({
					url: "/pages/my/wdwx/wdwx"
				})
			},	
			tzwdywcdd(){
				uni.navigateTo({
					url: "/pages/my/wdwx/wdywcdd/wdywcdd"
				})
			},	
			   onDateSelectorChange({ startDate, endDate }) {
			      console.log('onDateSelectorChange', startDate, endDate);
			    },
			    onDateSelectorSubmit({ startDate, endDate }) {
			      console.log('onDateSelectorSubmit', startDate, endDate);
			    },
			inputDialogToggle() {
							this.$refs.inputDialog.open()
						},
		}
	}
</script>

<style>
.top {
			margin-top: 88rpx;
		width: 750rpx;
		height: 400rpx;
		background-color: #3183FC;
		/* 	overflow: hidden; */
		/* 	background-image: url(@/static/wdimg/aaa.jpg); */
		position: relative;
	}

	.xxxg {
		position: absolute;
		width: 750rpx;

	}

	.xxxg-card {
		/* 		height: 500rpx; */
		/* 	width: 750rpx; */
		border-radius: 25rpx;
	}
	
	.xxxg-tshz{
		overflow: visible;
	}

	.wdyhq-dh {
		width: 100%;
		color: white;
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
		margin-bottom: 30rpx;
	}


.wdwxdd-head{
	width: 100%;
	/* height: 400rpx; */
	display: flex;
	justify-content: space-between;
	/* background-color: yellow; */
}


.wdwxdd-head-left{
	width: 400rpx;
/* 	background-color: red; */
	display: flex;
	align-items: center;
}
	
.wdwxdd-head-right{
/* 	background-color: blue;	 */
	align-items: center;
	margin-top: 10rpx;
	font-weight: bold;
	
}	
	
	
.wdwx-button{
	display: flex;
	align-items: center;
}	
	
	
.wxmknr{
	margin-top: 20rpx;
	display: flex;
}

.wxmknr-left{
	margin-right: 20rpx;
	font-weight: bold;
}
</style>
